<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item - a11y</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <main>
      <h1>Item</h1>

      <ion-item>
        <ion-label>Item with Input</ion-label>
        <ion-input placeholder="Placeholder"></ion-input>
      </ion-item>

      <ion-item disabled>
        <ion-label>Item disabled with Input</ion-label>
        <ion-input placeholder="Placeholder"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Item with Input disabled</ion-label>
        <ion-input placeholder="Placeholder" disabled></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Item with Select</ion-label>
        <ion-select>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
          <ion-select-option value="ps">PlayStation</ion-select-option>
          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
          <ion-select-option value="snes">SNES</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item disabled>
        <ion-label position="floating">Item disabled with Select</ion-label>
        <ion-select>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
          <ion-select-option value="ps">PlayStation</ion-select-option>
          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
          <ion-select-option value="snes">SNES</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Item with Select disabled</ion-label>
        <ion-select disabled>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
          <ion-select-option value="ps">PlayStation</ion-select-option>
          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
          <ion-select-option value="snes">SNES</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Item with Toggle</ion-label>
        <ion-toggle slot="end"></ion-toggle>
      </ion-item>

      <ion-item disabled>
        <ion-label>Item disabled with Toggle</ion-label>
        <ion-toggle slot="end"></ion-toggle>
      </ion-item>

      <ion-item>
        <ion-label>Item with Toggle disabled</ion-label>
        <ion-toggle slot="end" disabled></ion-toggle>
      </ion-item>

      <ion-item>
        <ion-label>Item with Radio</ion-label>
        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>

      <ion-item disabled>
        <ion-label>Item disabled with Radio</ion-label>
        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>Item with Radio disabled</ion-label>
        <ion-radio slot="start" value="biff" disabled></ion-radio>
      </ion-item>
    </main>
  </body>
</html>
